<template>
  <div>
    <div class="box">
      <div class="pictureDetail" v-if="postData.type == 1">
        <div class="big">
          <div class="max">
            <div class="top">
              <div class="icon" @click="$router.push('/index')">
                <span class="iconfont iconjiantou2"></span>
                <span class="iconfont iconnew"></span>
              </div>
              <span
                @click="guanzhu"
                class="attention"
                :class="{ onattention: !postData.has_follow }"
                >{{ postData.has_follow ? "已关注" : "关注" }}</span
              >
            </div>
            <div class="title">{{ postData.title }}</div>
            <div class="nickname">{{ postData.user.nickname }} 2020-01-01</div>
            <div class="content" v-html="postData.content"></div>
            <div class="center">
              <p class="dianzan" @click="dianzan">
                <span class="iconfont icondianzan"></span>
                <!-- {{ postData.like_length }} -->
                12
              </p>
              <p class="weixin">
                <span class="iconfont iconweixin"></span>
                微信
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="videoDetail" v-if="postData.type == 2">
        <div class="big">
          <div class="max">
            <Commonhead @click.native="$router.push('/index')"></Commonhead>
            <video
              controls
              src="https://video.pearvideo.com/mp4/adshort/20201108/cont-1705926-15472144_adpkg-ad_hd.mp4"
            ></video>
            <div class="content"></div>
            <div class="author">
              <div class="imges">
                <img
                  :src="$axios.defaults.baseURL + postData.user.head_img"
                  alt=""
                />
                <p>{{ postData.user.nickname }}</p>
              </div>
              <span
                @click="guanzhu"
                class="guanzhu"
                :class="{ onguanzhu: !postData.has_follow }"
                >{{ postData.has_follow ? "已关注" : "关注" }}</span
              >
            </div>
            <div class="title">
              {{ postData.title }}
            </div>
            <div class="center">
              <p class="dianzan">
                <span class="iconfont icondianzan"></span>
                <!-- {{ postData.like_length }} -->
                12
              </p>
              <p class="weixin">
                <span class="iconfont iconweixin"></span>
                微信
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="pinglun">精彩跟帖</div>
      <Main
        v-for="Comment in parentlist"
        :key="Comment.id"
        :parentData="Comment"
      ></Main>
      <div class="moreBig">
        <div class="more" @click="$router.push('/comment/' + $route.params.id)">
          更多跟帖
        </div>
      </div>
      <div class="detailinput">
        <div class="hide" v-if="!isShow">
          <div class="input">
            <input
              @focus="isshowcomment"
              type="text"
              placeholder="请写入你的跟帖"
              v-model="content"
            />
          </div>
          <div class="icon">
            <span class="iconfont iconpinglun-"></span>
            <p>123</p>
            <span
              class="iconfont iconshoucang"
              :class="{ noiconshoucang: postData.has_star }"
              @click="collect"
            ></span>
            <span class="iconfont iconfenxiang"></span>
          </div>
        </div>
        <div class="show" v-if="isShow">
          <textarea
            @blur="ishidecomment"
            v-model="content"
            ref="textout"
            name=""
            id=""
            cols="30"
            rows="4"
          ></textarea>
          <button @click="sendContent">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Commonhead from "../../components/Commonhead";
import Main from "../../components/Comment/Main";
export default {
  components: {
    Commonhead,
    Main,
  },

  data() {
    return {
      content: "",
      postData: [],
      parentlist: [],
      isShow: false, //点击输入框时触发
    };
  },
  created() {
    // 这里是文章列表
    this.$axios({
      url: "post/" + this.$route.params.id,
    }).then((res) => {
      console.log(res.data);

      this.postData = res.data.data;
    });
    // 这里是精彩跟帖
    this.$axios({
      url: "post_comment/" + this.$route.params.id,
    }).then((res) => {
      console.log(res.data);
      // 根据要求留三条在页面上
      if (res.data.data.length > 3) {
        res.data.data.length = 3;
      }
      this.parentlist = res.data.data;
    });
  },
  methods: {
    // 收藏
    collect() {
      this.$axios({
        url: "post_star/" + this.$route.params.id,
        headers: { Authorization: localStorage.getItem("token") },
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "取消成功") {
          this.postData.has_star = false;
          this.$toast("取消收藏");
        }
        if (res.data.message == "收藏成功") {
          this.postData.has_star = true;
          this.$toast("成功收藏");
        }
      });
    },
    guanzhu() {
      if (this.postData.has_follow) {
        // 取消关注
        this.$axios({
          url: "user_unfollow/" + this.postData.user.id,
          headers: { Authorization: localStorage.getItem("token") },
        }).then((res) => {
          console.log(res.data);
          this.postData.has_follow = false;
        });
      } else {
        // 关注用户
        this.$axios({
          url: "user_follows/" + this.postData.user.id,
          headers: { Authorization: localStorage.getItem("token") },
        }).then((res) => {
          console.log(res.data);
          this.postData.has_follow = true;
        });
      }
    },
    // 点赞功能
    dianzan() {
      this.$axios({
        url: "/post_like/" + this.$route.params.id,
        headers: { Authorization: localStorage.getItem("token") },
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "取消成功") {
          this.postData.has_like = false;
          this.postData.like_length -= 1;
          this.$toast("取消成功");
        } else {
          this.postData.has_like = true;
          this.postData.like_length += 1;
          this.$toast("点赞成功");
        }
      });
    },
    isshowcomment() {
      this.isShow = true;
      setTimeout(() => {
        this.$refs.textout.focus();
      }, 100);
    },
    ishidecomment() {
      // 设置延时器防止与输入框的失去焦点冲突
      setTimeout(() => {
        this.isShow = false;
      }, 100);
    },
    // 发送评论
    sendContent() {
      this.$axios({
        method: "post",
        url: "post_comment/" + this.$route.params.id,
        headers: { Authorization: localStorage.getItem("token") },
        data: {
          content: this.content,
        },
      }).then((res) => {
        console.log(res.data);
        this.content = ""; //清空输入框
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  word-break: break-all;
  padding-bottom: 40/360 * 100vw;
  .pictureDetail {
    .big {
      border-bottom: #ccc solid 4px;
      .max {
        margin-left: 10/360 * 100vw;
        margin-right: 10/360 * 100vw;
        .top {
          position: sticky;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          .icon {
            display: flex;
            align-items: center;
            flex: 1;
            .iconnew {
              padding-left: 5/360 * 100vw;
              font-size: 55/360 * 100vw;
            }
            .iconjiantou2 {
              //   padding-top: 10/360 * 100vw;
              font-size: 20/360 * 100vw;
            }
          }

          .attention {
            font-size: 12/360 * 100vw;
            width: 55/360 * 100vw;
            height: 25/360 * 100vw;
            line-height: 25/360 * 100vw;
            text-align: center;
            border: turquoise solid 2px;
            border-radius: 15/360 * 100vw;
            &.onattention {
              border-color: red;
              background-color: red;
              color: #fff;
            }
          }
        }
        .title {
          font-weight: 700;
          font-size: 16/360 * 100vw;
        }
        .nickname {
          font-size: 12/360 * 100vw;
          color: #868686;
          padding: 5/360 * 100vw 0 15/360 * 100vw 0;
        }
        .content {
          font-size: 16/360 * 100vw;
          /deep/ img {
            max-width: 100%;
          }
        }
        .center {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          padding: 0 0 10/360 * 100vw 0;
          .dianzan {
            font-size: 12/360 * 100vw;
            width: 80/360 * 100vw;
            height: 30/360 * 100vw;
            line-height: 30/360 * 100vw;
            border: turquoise solid 2px;
            border-radius: 15/360 * 100vw;
            .icondianzan {
              padding: 0 10/360 * 100vw;
            }
          }
          .weixin {
            font-size: 14/360 * 100vw;
            width: 80/360 * 100vw;
            height: 30/360 * 100vw;
            line-height: 30/360 * 100vw;
            border: turquoise solid 2px;
            border-radius: 15/360 * 100vw;
            .iconweixin {
              font-size: 18/360 * 100vw;
              color: #01c000;
              padding: 0 10/360 * 100vw;
            }
          }
        }
      }
    }
  }
  .videoDetail {
    .big {
      border-bottom: #ccc solid 4px;
      .max {
        margin: 10/360 * 100vw 10/360 * 100vw;
        .author {
          display: flex;
          align-items: center;
          .imges {
            display: flex;
            align-items: center;
            flex: 1;
            img {
              width: 40/360 * 100vw;
              height: 40/360 * 100vw;
              border: turquoise solid 2px;
              border-radius: 50%;
            }
            p {
              padding: 0 0 0 5/360 * 100vw;
              color: #ccc;
              font-size: 16/360 * 100vw;
            }
          }
          .guanzhu {
            font-size: 12/360 * 100vw;
            width: 55/360 * 100vw;
            height: 25/360 * 100vw;
            line-height: 25/360 * 100vw;
            text-align: center;
            border: turquoise solid 2px;
            border-radius: 15/360 * 100vw;
            &.onguanzhu {
              border-color: red;
              background-color: red;
              color: #fff;
            }
          }
        }
        video {
          width: 100%;
        }
        .title {
          padding: 10/360 * 100vw 0;
        }
        .center {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          padding: 12/360 * 100vw 0 0 0;
          .dianzan {
            font-size: 12/360 * 100vw;
            width: 80/360 * 100vw;
            height: 30/360 * 100vw;
            line-height: 30/360 * 100vw;
            border: turquoise solid 2px;
            border-radius: 15/360 * 100vw;
            .icondianzan {
              padding: 0 10/360 * 100vw;
            }
          }
          .weixin {
            font-size: 14/360 * 100vw;
            width: 80/360 * 100vw;
            height: 30/360 * 100vw;
            line-height: 30/360 * 100vw;
            border: turquoise solid 2px;
            border-radius: 15/360 * 100vw;
            .iconweixin {
              font-size: 18/360 * 100vw;
              color: #01c000;
              padding: 0 10/360 * 100vw;
            }
          }
        }
      }
    }
  }
  .pinglun {
    padding: 10/360 * 100vw 0;
    text-align: center;
    font-weight: 700;
    font-size: 20/360 * 100vw;
  }
  .moreBig {
    display: flex;
    justify-content: center;

    .more {
      font-size: 18/360 * 100vw;
      width: 118/360 * 100vw;
      height: 30/360 * 100vw;
      line-height: 30/360 * 100vw;
      text-align: center;
      border-radius: 15/360 * 100vw;
      border: skyblue 2px solid;
      color: skyblue;
      margin: 15/360 * 100vw 0 50/360 * 100vw 0;
    }
  }
  .detailinput {
    width: 100%;
    padding: 10/360 * 100vw;
    position: fixed;
    background-color: #f2f2f2;
    bottom: 0;

    .hide {
      display: flex;
      .input {
        input {
          text-indent: 1em;
          width: 180/360 * 100vw;
          height: 30/360 * 100vw;
          padding-left: 5/360 * 100vw;
          font-size: 14/360 * 100vw;
          background-color: #d7d7d7;
          border-radius: 15/360 * 100vw;
          border: none;
        }
      }
      .icon {
        padding: 5/360 * 100vw 0 0 20/360 * 100vw;
        display: flex;
        .iconpinglun- {
          position: relative;
          font-size: 26/360 * 100vw;
        }
        p {
          position: absolute;
          top: -5px;
          // left: 2px;
          background-color: red;
          color: #fff;
          padding: 1/360 * 100vw;
          border-radius: 7/360 * 100vw;
          font-size: 12/360 * 100vw;
        }
        .iconshoucang {
          padding: 0 25/360 * 100vw 0 25/360 * 100vw;
          font-size: 26/360 * 100vw;
          &.noiconshoucang {
            color: red;
          }
        }
        .iconfenxiang {
          font-size: 26/360 * 100vw;
        }
      }
    }
    .show {
      textarea {
        text-indent: 0.5em;
        width: 260/360 * 100vw;
        height: 90/360 * 100vw;
        font-size: 16/360 * 100vw;
        background-color: #d7d7d7;
        border: none;
        border-radius: 10/360 * 100vw;
        resize: none;
      }
      button {
        width: 50/360 * 100vw;
        height: 25/360 * 100vw;
        background-color: red;
        color: #fff;
        border: none;
        border-radius: 15/360 * 100vw;
        font-size: 14/360 * 100vw;
        margin: 0 0 0 10/360 * 100vw;
      }
    }
  }
}
</style>